关键字: translate
  • 前端程序员必须掌握之三角函数在前端动画中的应用
    ​开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现,timer-function 随意选用,最多也就调一下 cubic-bezier,找到看着舒服的就行。但是怎样让动画更顺 ...
  • 很多人css数值(百分比|负值)基准分不清,今天给你讲讲
    今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。 width height 百分比 当元素的height ...
  • 让伪元素层级在父元素之下
    伪元素默认层级是在父元素之上的,同时 ::after在::before之上伪元素方法1:z-index = -1#parent{}#parent::before{   ...
  • video移动端踩坑记
    最近做的项目里涉及到一个视频列表,点击播放视频,有点类似短视频APP个人主页的效果,直接使用了h5自带的video标签,没想到坑一个接一个。 首先展示下效果图: 踩坑记录: 踩坑一:视频列表中直接使用多个video标签无法达到产品的设计效果 ...
  • div水平居中,垂直居中的几种方式
    假设我们现在要实现box元素的居中 123 /* 公共代码 */ .wp { border: 1px solid red; ...
  • CSS3 动画
    Unsplash 1 渐变 渐变指在两个或多个指定的颜色之间显示平稳的过渡,渐变一般分为线性渐变和径向渐变,呈一条直线渐变的称作线性渐变,而从圆心到四周扩散的过程成为径向渐变 从左到右的线性渐变,起点是完全透明,慢慢过渡到完全不透明的红色 ...
  • 你知道css3的focus-within选择器吗?
    伪元素和伪类 说到这个,我们先回顾一下,伪类选择器和伪元素选择器,老版的浏览器没有严格区分下面 2 种写法。 a:after{} a::after{} 在新的标准中,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素,我 ...
  • 原生写一个渐隐渐显版的轮播图
    轮播图是项目中非常常见的一个效果,平时我们可能都会用别人写好的插件,但是必要的时候也需要自己手写,尤其是需要掌握下其中的实现原理。 一、需求 1.实现渐隐渐显自动轮播效果 2.鼠标移入:显示左右切换箭头,停止自动轮播 3.鼠标离开:隐藏左右 ...
  • css3实现动画有几种方式?
    这是一个考验面试者对css的基础知识。 css实现动画主要有3种方式,第一种是:transition实现渐变动画,第二种是:transform转变动画,第三种是:animation实现自定义动画,下面具体讲一下3种动画的实现方式。 tran ...
  • 前端基础——页面架构
    1. CSS Reset 为什么需要CSS Reset 浏览器对于各个HTML都赋予了默认的样式,并且不同的浏览器默认的样式不同,而通常我们的产品设计中样式都是不同于浏览器默认样式的,所以我们在开发中经常要去覆盖默认的样式,针对不同的浏览器 ...

暂无数据